<template>
  <div class="city-detail-page">
    <!-- 城市大图展示 -->
    <section class="city-hero position-relative">
      <div class="hero-image">
        <img :src="city.heroImage" :alt="city.name" class="w-100">
        <div class="hero-overlay"></div>
      </div>
      <div class="hero-content position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end">
        <div class="container">
          <nav aria-label="breadcrumb" class="mb-3">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/" class="text-white-50">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/cities" class="text-white-50">城市探索</router-link>
              </li>
              <li class="breadcrumb-item active text-white">{{ city.name }}</li>
            </ol>
          </nav>
          
          <div class="city-header text-white">
            <div class="row align-items-end">
              <div class="col-lg-8">
                <h1 class="display-4 fw-bold mb-3">{{ city.name }}</h1>
                <p class="lead mb-4">{{ city.slogan }}</p>
                <div class="city-meta d-flex flex-wrap gap-4 align-items-center">
                  <div class="rating-badge">
                    <span class="badge bg-warning text-dark fs-6">
                      <i class="fas fa-star me-1"></i>{{ city.rating }}
                    </span>
                    <small class="text-white-50 ms-2">{{ city.reviewCount }} 条评价</small>
                  </div>
                  <div class="weather-info d-flex align-items-center">
                    <i class="fas fa-cloud-sun me-2"></i>
                    <span>25°C 晴朗</span>
                  </div>
                  <button class="btn btn-light" @click="toggleFavorite">
                    <i class="fas" :class="isFavorited ? 'fa-heart text-danger' : 'fa-heart'"></i>
                    {{ isFavorited ? '已收藏' : '收藏' }}
                  </button>
                </div>
              </div>
              <div class="col-lg-4">
                <div class="quick-facts card bg-dark bg-opacity-50 border-0">
                  <div class="card-body text-center">
                    <h6 class="card-title text-white mb-3">快速了解</h6>
                    <div class="facts-grid">
                      <div class="fact-item" v-for="fact in quickFacts" :key="fact.label">
                        <div class="fact-value text-white fw-bold">{{ fact.value }}</div>
                        <div class="fact-label text-white-50 small">{{ fact.label }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 标签页导航 -->
    <section class="tab-navigation bg-white shadow-sm sticky-top">
      <div class="container">
        <ul class="nav nav-tabs nav-justified border-0">
          <li class="nav-item" v-for="tab in tabs" :key="tab.id">
            <button class="nav-link" 
                    :class="{ active: activeTab === tab.id }"
                    @click="switchTab(tab.id)">
              <i :class="tab.icon" class="me-2"></i>
              {{ tab.name }}
            </button>
          </li>
        </ul>
      </div>
    </section>

    <!-- 标签内容 -->
    <section class="tab-content">
      <div class="container py-5">
        
        <!-- 城市概览 -->
        <div v-if="activeTab === 'overview'" class="tab-pane fade show active">
          <div class="row">
            <div class="col-lg-8">
              <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                  <h3 class="card-title mb-4">城市介绍</h3>
                  <p class="card-text lead" v-html="city.description"></p>
                  
                  <div class="city-highlights mt-5">
                    <h5 class="mb-4">城市亮点</h5>
                    <div class="row">
                      <div v-for="highlight in city.highlights" :key="highlight.id" class="col-md-6 mb-3">
                        <div class="highlight-item d-flex align-items-center">
                          <div class="highlight-icon me-3">
                            <i :class="highlight.icon" class="text-primary"></i>
                          </div>
                          <div>
                            <h6 class="mb-1">{{ highlight.title }}</h6>
                            <p class="text-muted small mb-0">{{ highlight.description }}</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 特色标签 -->
              <div class="card border-0 shadow-sm">
                <div class="card-body">
                  <h5 class="card-title mb-3">城市特色</h5>
                  <div class="d-flex flex-wrap gap-2">
                    <span v-for="tag in city.tags" :key="tag" class="badge bg-primary fs-6 py-2 px-3">
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="col-lg-4">
              <!-- 实用信息 -->
              <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                  <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>实用信息</h6>
                </div>
                <div class="card-body">
                  <div class="info-item mb-3" v-for="info in practicalInfo" :key="info.label">
                    <strong class="d-block text-muted small mb-1">{{ info.label }}</strong>
                    <span>{{ info.value }}</span>
                  </div>
                </div>
              </div>

              <!-- 最佳旅行时间 -->
              <div class="card border-0 shadow-sm">
                <div class="card-header bg-success text-white">
                  <h6 class="mb-0"><i class="fas fa-calendar-alt me-2"></i>最佳旅行时间</h6>
                </div>
                <div class="card-body">
                  <p class="card-text">{{ city.bestTime }}</p>
                  <div class="season-chart">
                    <div v-for="month in bestMonths" :key="month.name" class="season-item mb-2">
                      <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="small">{{ month.name }}</span>
                        <span class="badge" :class="month.badgeClass">{{ month.recommendation }}</span>
                      </div>
                      <div class="progress" style="height: 6px;">
                        <div class="progress-bar" :class="month.progressClass" :style="{ width: month.width }"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 景点推荐 -->
        <div v-if="activeTab === 'attractions'" class="tab-pane fade show active">
          <div class="row mb-4">
            <div class="col">
              <h3 class="mb-3">热门景点</h3>
              <div class="d-flex flex-wrap gap-2 mb-4">
                <button v-for="category in attractionCategories" 
                        :key="category"
                        class="btn btn-outline-primary btn-sm"
                        :class="{ active: selectedAttractionCategory === category }"
                        @click="selectedAttractionCategory = category">
                  {{ category }}
                </button>
              </div>
            </div>
          </div>

          <div class="row">
            <div v-for="attraction in filteredAttractions" :key="attraction.id" class="col-md-6 col-lg-4 mb-4">
              <div class="attraction-card card h-100 border-0 shadow-sm">
                <div class="position-relative overflow-hidden">
                  <img :src="attraction.image" class="card-img-top" :alt="attraction.name">
                  <div class="attraction-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-end p-3">
                    <div class="w-100">
                      <span class="badge bg-primary mb-2">{{ attraction.category }}</span>
                      <div class="d-flex justify-content-between align-items-center">
                        <span class="text-white fw-bold">{{ attraction.name }}</span>
                        <span class="badge bg-warning text-dark">
                          <i class="fas fa-star me-1"></i>{{ attraction.rating }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <p class="card-text text-muted small">{{ attraction.description }}</p>
                  <div class="attraction-info d-flex justify-content-between align-items-center">
                    <div class="text-muted small">
                      <i class="fas fa-clock me-1"></i>{{ attraction.duration }}
                    </div>
                    <div class="text-muted small">
                      <i class="fas fa-ticket-alt me-1"></i>{{ attraction.price }}
                    </div>
                  </div>
                </div>
                <div class="card-footer bg-transparent border-0">
                  <button class="btn btn-primary btn-sm w-100" @click="viewAttraction(attraction.id)">
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 美食指南 -->
        <div v-if="activeTab === 'food'" class="tab-pane fade show active">
          <div class="row">
            <div class="col-lg-8">
              <h3 class="mb-4">特色美食</h3>
              <div class="row">
                <div v-for="food in city.foods" :key="food.id" class="col-md-6 mb-4">
                  <div class="food-card card h-100 border-0 shadow-sm">
                    <img :src="food.image" class="card-img-top" :alt="food.name">
                    <div class="card-body">
                      <h5 class="card-title">{{ food.name }}</h5>
                      <p class="card-text text-muted small">{{ food.description }}</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <span class="badge bg-warning text-dark">
                          <i class="fas fa-utensils me-1"></i>{{ food.type }}
                        </span>
                        <span class="text-primary fw-bold">{{ food.price }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="col-lg-4">
              <div class="card border-0 shadow-sm">
                <div class="card-header bg-warning text-dark">
                  <h6 class="mb-0"><i class="fas fa-map-marked-alt me-2"></i>美食地图</h6>
                </div>
                <div class="card-body">
                  <div v-for="district in foodDistricts" :key="district.name" class="district-item mb-3 pb-3 border-bottom">
                    <h6 class="mb-2">{{ district.name }}</h6>
                    <p class="small text-muted mb-2">{{ district.description }}</p>
                    <div class="d-flex flex-wrap gap-1">
                      <span v-for="cuisine in district.cuisines" :key="cuisine" class="badge bg-light text-dark">
                        {{ cuisine }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 交通信息 -->
        <div v-if="activeTab === 'transport'" class="tab-pane fade show active">
          <h3 class="mb-4">交通信息</h3>
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-info text-white">
                  <h6 class="mb-0"><i class="fas fa-plane me-2"></i>到达方式</h6>
                </div>
                <div class="card-body">
                  <div v-for="transport in city.transportation.arrival" :key="transport.type" class="transport-item mb-3">
                    <h6 class="mb-2">{{ transport.type }}</h6>
                    <p class="text-muted small mb-0">{{ transport.description }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-success text-white">
                  <h6 class="mb-0"><i class="fas fa-subway me-2"></i>市内交通</h6>
                </div>
                <div class="card-body">
                  <div v-for="transport in city.transportation.local" :key="transport.type" class="transport-item mb-3">
                    <h6 class="mb-2">{{ transport.type }}</h6>
                    <p class="text-muted small mb-0">{{ transport.description }}</p>
                    <small class="text-primary">{{ transport.cost }}</small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 教育文化 -->
        <div v-if="activeTab === 'education'" class="tab-pane fade show active">
          <h3 class="mb-4">教育文化</h3>
          <div class="row">
            <div class="col-md-6 mb-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-purple text-white">
                  <h6 class="mb-0"><i class="fas fa-graduation-cap me-2"></i>教育机构</h6>
                </div>
                <div class="card-body">
                  <div v-for="institution in city.education.institutions" :key="institution.name" class="institution-item mb-3">
                    <h6 class="mb-1">{{ institution.name }}</h6>
                    <p class="text-muted small mb-0">{{ institution.type }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 mb-4">
              <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-orange text-white">
                  <h6 class="mb-0"><i class="fas fa-landmark me-2"></i>文化场所</h6>
                </div>
                <div class="card-body">
                  <div v-for="venue in city.culture.venues" :key="venue.name" class="venue-item mb-3">
                    <h6 class="mb-1">{{ venue.name }}</h6>
                    <p class="text-muted small mb-0">{{ venue.type }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  name: 'CityDetail',
  setup() {
    const route = useRoute()
    const activeTab = ref('overview')
    const selectedAttractionCategory = ref('全部')
    
    const city = ref({
      id: 1,
      name: '巴黎',
      slogan: '浪漫之都，艺术与文化的殿堂',
      heroImage: 'https://images.unsplash.com/photo-1502602898536-47ad22581b52?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80',
      rating: 4.8,
      reviewCount: 1284,
      description: '巴黎是法国的首都和最大城市，也是法国的政治、经济、文化和商业中心，世界五个国际大都市之一。巴黎建都已有1400多年的历史，它不仅是法国，也是西欧的政治、经济和文化中心。',
      tags: ['浪漫', '艺术', '文化', '美食', '购物', '历史'],
      highlights: [
        {
          id: 1,
          icon: 'fas fa-landmark',
          title: '世界级博物馆',
          description: '卢浮宫、奥赛博物馆等'
        },
        {
          id: 2,
          icon: 'fas fa-utensils',
          title: '美食之都',
          description: '米其林餐厅聚集地'
        },
        {
          id: 3,
          icon: 'fas fa-shopping-bag',
          title: '购物天堂',
          description: '香榭丽舍大街购物'
        },
        {
          id: 4,
          icon: 'fas fa-heart',
          title: '浪漫之都',
          description: '塞纳河畔的浪漫'
        }
      ],
      bestTime: '春季(4-6月)和秋季(9-10月)是最佳旅行时间，气候宜人，游客相对较少。',
      attractions: [
        {
          id: 1,
          name: '埃菲尔铁塔',
          category: '地标建筑',
          image: 'https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          rating: 4.9,
          description: '巴黎的标志性建筑，世界著名景点。',
          duration: '2-3小时',
          price: '€25起'
        }
      ],
      foods: [
        {
          id: 1,
          name: '法式蜗牛',
          type: '传统美食',
          image: 'https://images.unsplash.com/photo-1574484284002-952d92456975?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80',
          description: '用大蒜黄油烤制的经典法式菜肴。',
          price: '€15-25'
        }
      ],
      transportation: {
        arrival: [
          { type: '飞机', description: '戴高乐机场和奥利机场是主要国际机场' },
          { type: '火车', description: '欧洲之星连接伦敦，TGV连接欧洲各大城市' }
        ],
        local: [
          { type: '地铁', description: '14条线路覆盖全城', cost: '€1.9/次' },
          { type: '公交', description: '夜间公交服务完善', cost: '€1.9/次' }
        ]
      },
      education: {
        institutions: [
          { name: '索邦大学', type: '公立大学' },
          { name: '巴黎高等师范学院', type: '精英大学' }
        ]
      },
      culture: {
        venues: [
          { name: '巴黎歌剧院', type: '表演艺术' },
          { name: '蓬皮杜中心', type: '现代艺术' }
        ]
      }
    })

    const tabs = ref([
      { id: 'overview', name: '城市概览', icon: 'fas fa-info-circle' },
      { id: 'attractions', name: '景点推荐', icon: 'fas fa-landmark' },
      { id: 'food', name: '美食指南', icon: 'fas fa-utensils' },
      { id: 'transport', name: '交通信息', icon: 'fas fa-subway' },
      { id: 'education', name: '教育文化', icon: 'fas fa-graduation-cap' }
    ])

    const quickFacts = ref([
      { label: '人口', value: '214万' },
      { label: '面积', value: '105.4 km²' },
      { label: '语言', value: '法语' },
      { label: '货币', value: '欧元' }
    ])

    const practicalInfo = ref([
      { label: '时区', value: 'UTC+1 (夏令时 UTC+2)' },
      { label: '电压', value: '230V, 50Hz' },
      { label: '紧急电话', value: '112' },
      { label: '旅游咨询', value: '+33 892 683 000' }
    ])

    const attractionCategories = ref(['全部', '地标建筑', '博物馆', '公园', '历史遗迹'])
    const foodDistricts = ref([
      {
        name: '拉丁区',
        description: '学生和知识分子聚集地，有许多实惠的餐厅',
        cuisines: ['法式小馆', '学生餐厅', '咖啡馆']
      }
    ])

    const bestMonths = ref([
      { name: '1月', width: '30%', badgeClass: 'bg-secondary', progressClass: 'bg-secondary', recommendation: '较冷' },
      { name: '4月', width: '80%', badgeClass: 'bg-success', progressClass: 'bg-success', recommendation: '最佳' }
    ])

    const filteredAttractions = computed(() => {
      if (selectedAttractionCategory.value === '全部') {
        return city.value.attractions
      }
      return city.value.attractions.filter(attraction => 
        attraction.category === selectedAttractionCategory.value
      )
    })

    const switchTab = (tabId) => {
      activeTab.value = tabId
    }

    const toggleFavorite = () => {
      console.log('收藏功能')
    }

    const viewAttraction = (attractionId) => {
      console.log('查看景点:', attractionId)
    }

    onMounted(() => {
      console.log('加载城市ID:', route.params.id)
    })

    return {
      activeTab,
      selectedAttractionCategory,
      city,
      tabs,
      quickFacts,
      practicalInfo,
      attractionCategories,
      foodDistricts,
      bestMonths,
      filteredAttractions,
      switchTab,
      toggleFavorite,
      viewAttraction,
      isFavorited: ref(false)
    }
  }
}
</script>

<style scoped>
.city-hero {
  height: 70vh;
  min-height: 600px;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-image img {
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.tab-navigation {
  z-index: 1020;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--neutral-gray);
  font-weight: 500;
  padding: 1.2rem 0.5rem;
  transition: all var(--transition-normal);
}

.nav-tabs .nav-link.active {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: var(--primary-orange);
  border-bottom-color: var(--primary-orange);
}

.facts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.fact-item {
  text-align: center;
}

.highlight-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 107, 53, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.attraction-card {
  transition: all var(--transition-normal);
}

.attraction-card:hover {
  transform: translateY(-5px);
}

.attraction-overlay {
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.attraction-card:hover .attraction-overlay {
  opacity: 1;
}

.food-card {
  transition: transform var(--transition-normal);
}

.food-card:hover {
  transform: scale(1.05);
}

.bg-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.bg-orange {
  background: var(--gradient-primary) !important;
}

.district-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .city-hero {
    height: 60vh;
    min-height: 500px;
  }
  
  .nav-tabs .nav-link {
    padding: 0.8rem 0.3rem;
    font-size: 0.9rem;
  }
  
  .facts-grid {
    grid-template-columns: 1fr;
  }
}
</style>